<template>
	<view class="flex flex-column" style="padding-bottom: 100px;">
		<!-- 活动图片 -->
		<image class="activity-image" :src="activityDetail.activtyImage" mode="aspectFill"></image>

		<!-- 活动信息 -->
		<view class="background padding">
			<u-text color="black" size="28" :text="activityDetail.activityTitle"></u-text>
		</view>

		<!-- 活动相关信息 -->
		<view class="margin-top background padding ">
			<u-icon name="map" :label="'目的地：    '+city" labelPos="right" color="#2979ff" size="40"
				labelColor="rgba(0, 0, 0, .9)" labelSize="18px"></u-icon>
			<u-icon name="bell" :label="'活动时间： '+activityDetail.startTime+'-'+activityDetail.endTime" labelPos="right"
				color="#2979ff" size="40" labelColor="rgba(0, 0, 0, .9)" labelSize="18px"></u-icon>
			<u-icon name="man-add" :label="'联系人： '+activityDetail.initiator" labelPos="right" color="#2979ff" size="40"
				labelColor="rgba(0, 0, 0, .9)" labelSize="18px"></u-icon>
		</view>


		<!-- 活动亮点数据 -->
		<!-- <view class=" background margin-top padding">
			<u-text color="black" size="28" text="活动亮点"></u-text>
			<view class="">
				<u-text size="20" :text="activityDetail.activityDes"></u-text>
			</view>
			
		</view> -->
		<!-- 活动亮点数据 -->
		<view class="background margin-top padding">
			<u-text color="black" size="28" text="活动亮点"></u-text>
			<view class="highlights-content">
				<u-text size="20" :text="activityDetail.activityDes"></u-text>
			</view>
			<view v-if="isContentOverflow && !showMoreContent" class="text-center margin-top">
				<u-button type="info" size="mini" @click="showMoreContent = true">查看更多</u-button>
			</view>
			<view v-if="isContentOverflow && showMoreContent" class="text-center margin-top">
				<u-button type="info" size="mini" @click="showMoreContent = false">收起</u-button>
			</view>
		</view>


		<!-- 活动地点 -->
		<view class="flex flex-column flex-center background margin-top padding">
			<u-text color="black" size="28" text="活动地点"></u-text>
			<view style="margin-top: 10px;"></view>
			<map style="height: 250px;width: 100%;border-radius: 5px;" :latitude="latitude" :longitude="longitude"
				:scale="scale" :markers="markers"></map>
		</view>

		<!-- 固定底部栏 -->
		<view class="fixed-bottom">
			<view class="activity-price">￥{{ activityDetail.activtyPrice }} / 人</view>
			<view style="margin-right: 30px;">
				<u-button type="error" class="sign-up-button" :disabled="isSignedUp" @click="showSignUpPopup = true">
					{{ isSignedUp ? '已报名' : '报名参加' }}
				</u-button>
			</view>

		</view>

		<!-- 弹出层 -->
		<view v-if="showSignUpPopup" class="popup-overlay">
			<view class="flex flex-column padding background border-radius " style="width: 80%;">
				<u-text color="black" size="25px" text="活动报名信息"></u-text>
				<view class="flex flex-row margin-top" style="margin-bottom: 10px;">
					<image style="height: 100px;width: 100px;border-radius: 3px;" :src="activityDetail.activtyImage"
						mode="aspectFill"></image>
					<view style="margin-left: 5px;"></view>
					<u-text color="black" :line=1 size="18px" :text="activityDetail.activityTitle"
						style="margin-left: 10px;"></u-text>
				</view>
				<view style="margin-top: 3px;"></view>
				<u-text :text="'活动时间： '+activityDetail.startTime+'-'+activityDetail.endTime"
					style="margin-bottom: 10px;" size="18px"></u-text>
				<view class="flex flex-row justify-between align-center" style="margin-bottom: 10px;">
					<u-text color="rgba(0, 0, 0, .9)" size="18px"
						:text="'￥ '+activityDetail.activtyPrice+'/人'"></u-text>
					<view class="flex flex-row">
						<u-button type="info" @click="decreaseParticipants" :disabled="participants <= 1">-</u-button>
						<u-text :text="participants" style="margin: 0 10px;"></u-text>
						<u-button type="info" @click="increaseParticipants">+</u-button>
					</view>
				</view>
				<u-text color="rgba(0, 0, 0, .9)" size="18px" :text="'总金额：￥ '+totalMoney"
					style="margin-bottom: 10px;"></u-text>
				<view class="flex flex-row justify-between margin-top ">
					<u-button type="info" @click="showSignUpPopup = false">取消</u-button>
					<u-button type="primary" @click="signUp">提交报名</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityDetail: {}, // 存储活动详情数据
				showSignUpPopup: false, // 控制报名信息弹出层的显示与隐藏
				userId: uni.getStorageSync('userId'),
				isSignedUp: false, // 标记用户是否已经报名
				isContentOverflow: false, // 标记活动亮点内容是否溢出
				showMoreContent: false, // 控制是否显示更多活动亮点内容
				participants: 1, // 参与人数
				totalMoney: null,
				latitude: '39.92',
				longitude: '116.40',
				scale: 12,
				markers: [],
				city: '',
				images:''

			};
		},
		computed: {
			totalPrice() {
				this.totalMoney = this.activityDetail.activtyPrice * this.participants;
			}
		},
		onLoad(options) {
			this.fetchActivityDetail(options.activityId);
			this.checkUserSignUpStatus(options.activityId);
		},
		methods: {
			// 获取活动详情数据
			fetchActivityDetail(activityId) {
				uni.request({
					url: `http://localhost:8090/activity/${activityId}`, // 请替换为实际的后端接口地址
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) { // 假设成功状态码为200
							// console.log(res.data.data.activityLocation)
							this.activityDetail = {
								...res.data.data,
							};
							//提取经纬度
							const [lng, lat] = this.activityDetail.activityLocation.split(',');
							this.latitude = lat;
							this.longitude = lng;
							this.markers = [{
								id: 1,
								latitude: parseFloat(lat),
								longitude: parseFloat(lng),
								title: '当前位置',
								width: 30, // 指定标记的宽度
								height: 50 // 指定标记的高度

							}];
							// 根据经纬度获取地理位置信息
							this.getAddressByLatLng(lat, lng);
							// 提取activityDes中的图片链接
							// const activityDes = this.activityDetail.activityDes;
							// const regex = /\{ src: "([^"]+)" \}/;
							// const match = activityDes.match(regex);
							// if (match && match[1]) {
							// 	this.images = match[1];
							// 	// 移除activityDes中的图片信息
							// 	this.activityDetail.activityDes = activityDes.replace(regex, '');
							// }

						}
					},
					fail: (err) => {
						console.error('获取活动详情数据失败:', err);
					}
				});
			},
			// 检查用户是否已经报名该活动
			checkUserSignUpStatus(activityId) {
				uni.request({
					url: `http://localhost:8090/activityRegistration/check/${this.userId}/${activityId}`,
					method: 'GET',
					success: (res) => {
						if (res.data.code === 200) {
							this.isSignedUp = res.data.data;
						}
					},
					fail: (err) => {
						console.error('检查报名状态失败:', err);
					}
				});
			},
			// 增加参与人数
			increaseParticipants() {
				this.participants++;
			},
			// 减少参与人数
			decreaseParticipants() {
				if (this.participants > 1) {
					this.participants--;
				}
			},
			// 报名参加活动
			signUp() {
				const activityRegistration = {
					userId: this.userId,
					activityId: this.activityDetail.activityId,
					totalMoney: this.totalMoney
				};
				uni.request({
					url: `http://localhost:8090/activityRegistration/singUp`, // 这里使用你提供的后端接口地址
					method: 'POST',
					header: {
						'Content-Type': 'application/json'
					},
					data: activityRegistration,
					success: (res) => {
						console.log(res);
						if (res.data.code === 200) { // 假设成功状态码为200
							uni.showToast({
								title: '报名成功',
								icon: 'success',
								duration: 1000,
								success: () => {
									// 提示框消失后跳转到我的订单页面
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/my/order/order' // 请替换为实际的我的订单页面路径
										});
									}, 2000);
								}
							});
							this.showSignUpPopup = false;
							this.isSignedUp = true; // 更新报名状态
						} else {
							uni.showToast({
								title: '报名失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('报名失败:', err);
						uni.showToast({
							title: '报名失败',
							icon: 'none'
						});
					}
				});
			},

			// 根据经纬度获取地理位置信息
			getAddressByLatLng(lat, lng) {
				const key = 'I3FBZ-2KILT-FRXXE-VLDLV-DGSQ7-VXFH2'; // 替换为你的腾讯地图 API Key
				uni.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${key}`,
					method: 'GET',
					success: (res) => {
						if (res.data.status === 0) {
							// console.log(res.data.result)
							this.city = res.data.result.address;
						} else {
							console.error('获取地理位置信息失败:', res.data.message);
						}
					},
					fail: (err) => {
						console.error('获取地理位置信息失败:', err);
					}
				});
			}


		}
	};
</script>

<style>
	.activity-detail-container {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding-bottom: 60px;
		/* 为底部栏留出空间 */
	}

	.activity-image {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.activity-info {
		background-color: #ffffff;
		padding: 10px;
		color: #000000;
	}

	.activity-title {
		font-size: 20px;
		font-weight: bold;
		padding-bottom: 10px;
	}

	.activity-time {
		font-size: 14px;
		color: #666;
		padding-bottom: 10px;
	}

	.activity-content {
		padding-bottom: 10px;
	}

	.activity-highlights {
		padding: 10px;
	}

	.highlights-title {
		font-size: 18px;
		color: #999;
		text-align: left;
		margin-bottom: 10px;
	}

	.highlights-content {
		color: #000000;
		margin-bottom: 10px;
		overflow: hidden;
		max-height: 1000px;
	}

	.overflow-content {
		max-height: 200px;
		text-overflow: ellipsis;
	}

	.highlights-content image {
		width: 100%;
		margin-bottom: 10px;
	}

	.meeting-place {
		padding: 10px;
	}

	.meeting-place-text {
		padding-top: 10px;
	}

	.activity-advisor {
		margin-top: 10px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
	}

	.advisor-name {
		font-size: 16px;
		font-weight: bold;
	}

	.contact-advisor {
		background-color: #007aff;
		color: #fff;
		padding: 8px 15px;
		border-radius: 5px;
		border: none;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	}

	.activity-price {
		font-size: 16px;
		font-weight: bold;
	}

	.sign-up-button {
		background-color: #007aff;
		color: #fff;
		padding: 8px 15px;
		border-radius: 5px;
		border: none;
	}

	.sign-up-button:disabled {
		background-color: #ccc;
	}

	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		/* 添加边距 */
	}

	.popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
		/* 增加圆角 */
		width: 100%;
		max-width: 350px;
		/* 限制最大宽度 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
	}

	.popup-title {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 15px;
		text-align: center;
		/* 标题居中 */
	}

	.popup-info {
		margin-bottom: 20px;
		padding: 0 10px;
		/* 添加内边距 */
	}

	.popup-info view {
		margin-bottom: 8px;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		/* 添加内边距 */
	}

	.popup-buttons button {
		padding: 10px 15px;
		border-radius: 5px;
		border: none;
		width: 48%;
		/* 按钮宽度 */
		font-size: 16px;
	}

	.popup-buttons button:first-child {
		background-color: #e0e0e0;
		color: #333;
	}

	.popup-buttons button:last-child {
		background-color: #007aff;
		color: #fff;
	}
	
	/* 活动亮点样式 */
.highlights-content {
	color: #333333;
	line-height: 1.6; /* 调整行间距，让内容更易读 */
	margin-top: 10px;
	overflow: hidden; /* 隐藏溢出内容 */
}

/* 展开/收起按钮样式 */
.text-center {
	text-align: center;
}
	
	
	
	
	
	
	
	
</style>